<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>方向感知鼠标悬停效果动画</title>
        <style type="text/css">
            @charset "utf-8";
            /* CSS Document */
            html{
                font-family:arial;
                color:#aaa;
            }
            body{
                background-color:#2C3437;
            }
 
            a{
                color:#5555ff;
            }
 
            ul{
                width: 500px;
            }
            li{
                display: inline-block;
                list-style: none;
                margin: 2px 0;
            }
            .container{
                text-align:center;
                perspective:500px;
                -webkit-perspective:500px;
                border: 1px solid;
            }
            .example{
                display:table-cell;
                vertical-align:middle;
                color: #fff;
                width: 150px;
                height: 150px;
                background:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202007%2F22%2F20200722165946_KkJVm.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657783574&t=f0f963129649bb9e6acf92e69ebb87b1) no-repeat;
                background-size: 100%;
            }
 
            @-webkit-keyframes topenter {
                from {
                    -webkit-transform-origin:top;
                    -webkit-transform:rotateX(-90deg);
                }
                to {
                    -webkit-transform-origin:top;
                    -webkit-transform:rotateX(0deg);
                }
            }
            @keyframes topenter {
                from {
                    transform-origin:top;
                    transform:rotateX(-90deg);
                }
                to {
                    transform-origin:top;
                    transform:rotateX(0deg);
                }
            }
            @-webkit-keyframes topleave {
                from {
                    -webkit-transform-origin:top;
                    -webkit-transform:rotateX(0deg);
                }
                to {
                    -webkit-transform-origin:top;
                    -webkit-transform:rotateX(-90deg);
                }
            }
            @keyframes topleave {
                from {
                    transform-origin:top;
                    transform:rotateX(0deg);
                }
                to {
                    transform-origin:top;
                    transform:rotateX(-90deg);
                }
            }
            @-webkit-keyframes bottomenter {
                from {
                    -webkit-transform-origin:bottom;
                    -webkit-transform:rotateX(90deg);
                }
                to {
                    -webkit-transform-origin:bottom;
                    -webkit-transform:rotateX(0deg);
                }
            }
            @keyframes bottomenter {
                from {
                    transform-origin:bottom;
                    transform:rotateX(90deg);
                }
                to {
                    transform-origin:bottom;
                    transform:rotateX(0deg);
                }
            }
            @-webkit-keyframes bottomleave {
                from {
                    -webkit-transform-origin:bottom;
                    -webkit-transform:rotateX(0deg);
                }
                to {
                    -webkit-transform-origin:bottom;
                    -webkit-transform:rotateX(90deg);
                }
            }
            @keyframes bottomleave {
                from {
                    transform-origin:bottom;
                    transform:rotateX(0deg);
                }
                to {
                    transform-origin:bottom;
                    transform:rotateX(90deg);
                }
            }
            @-webkit-keyframes leftenter {
                from {
                    -webkit-transform-origin:left;
                    -webkit-transform:rotateY(90deg);
                }
                to {
                    -webkit-transform-origin:left;
                    -webkit-transform:rotateY(0deg);
                }
            }
            @keyframes leftenter {
                from {
                    transform-origin:left;
                    transform:rotateY(90deg);
                }
                to {
                    transform-origin:left;
                    transform:rotateY(0deg);
                }
            }
            @-webkit-keyframes leftleave {
                from {
                    -webkit-transform-origin:left;
                    -webkit-transform:rotateY(0deg);
                }
                to {
                    -webkit-transform-origin:left;
                    -webkit-transform:rotateY(90deg);
                }
            }
            @keyframes leftleave {
                from {
                    transform-origin:left;
                    transform:rotateY(0deg);
                }
                to {
                    transform-origin:left;
                    transform:rotateY(90deg);
                }
            }
            @-webkit-keyframes rightenter {
                from {
                    -webkit-transform-origin:right;
                    -webkit-transform:rotateY(-90deg);
                }
                to {
                    -webkit-transform-origin:right;
                    -webkit-transform:rotateY(0deg);
                }
            }
            @keyframes rightenter {
                from {
                    transform-origin:right;
                    transform:rotateY(-90deg);
                }
                to {
                    transform-origin:right;
                    transform:rotateY(0deg);
                }
            }
            @-webkit-keyframes rightleave {
                from {
                    -webkit-transform-origin:right;
                    -webkit-transform:rotateY(0deg);
                }
                to {
                    -webkit-transform-origin:right;
                    -webkit-transform:rotateY(-90deg);
                }
            }
            @keyframes rightleave {
                from {
                    transform-origin:right;
                    transform:rotateY(0deg);
                }
                to {
                    transform-origin:right;
                    transform:rotateY(-90deg);
                }
            }
        </style>
	</head>
	<body>
		<script type="text/javascript"  src="../../../js/jquery.min.js"></script>
        <div id="wrapper">
            <ul>
                <li>
                    <div class="container">
                        <div class="example"></div>
                    </div>
                </li>
                <li>
                    <div class="container">
                        <div class="example"></div>
                    </div>
                </li>
                <li>
                    <div class="container">
                        <div class="example"></div>
                    </div>
                </li>
                <li>
                    <div class="container">
                        <div class="example"></div>
                    </div>
                </li>
                <li>
                    <div class="container">
                        <div class="example"></div>
                    </div>
                </li>
                <li>
                    <div class="container">
                        <div class="example"></div>
                    </div>
                </li>
				<li>
                    <div class="container">
                        <div class="example"></div>
                    </div>
                </li>
                <li>
                    <div class="container">
                        <div class="example"></div>
                    </div>
                </li>
                 <li>
                    <div class="container">
                        <div class="example"></div>
                    </div>
                </li>
            </ul>
        </div>
        <script>
         $(function () {
             //initialize
             $('.container').css({
                 'perspective-origin': '50% 0%',
                 '-webkit-perspective-origin': '50% 0%'
             });
             $('.container .example').css({
                 'animation': 'topleave 400ms forwards',
                 '-webkit-animation': 'topleave 400ms forwards'
             });
             $('.container').bind('mouseenter mouseleave', function (e) {
                 var dir = getDirection($(this), e),
                     enter = e.type === 'mouseenter',
                     topPerspectiveOrigin = {
                         'perspective-origin': '50% 0%',
                         '-webkit-perspective-origin': '50% 0%'
                     },
                     rightPerspectiveOrigin = {
                         'perspective-origin': '100% 50%',
                         '-webkit-perspective-origin': '100% 50%'
                     },
                     bottomPerspectiveOrigin = {
                         'perspective-origin': '50% 100%',
                         '-webkit-perspective-origin': '50% 100%'
                     },
                     leftPerspectiveOrigin = {
                         'perspective-origin': '0% 50%',
                         '-webkit-perspective-origin': '0% 50%'
                     },
                     $target = $(this).find('.example');
                 switch (dir) {
                     case 0:
                         if (enter) {
                             $(this).css(topPerspectiveOrigin);
                             $target.css({
                                 'animation': 'topenter 400ms forwards',
                                 '-webkit-animation': 'topenter 400ms forwards'
                             });
                         } else {
                             $(this).css(topPerspectiveOrigin);
                             $target.css({
                                 'animation': 'topleave 400ms forwards',
                                 '-webkit-animation': 'topleave 400ms forwards'
                             });
                         };
                         break;
                     case 1:
                         if (enter) {
                             $(this).css(rightPerspectiveOrigin);
                             $target.css({
                                 'animation': 'rightenter 400ms forwards',
                                 '-webkit-animation': 'rightenter 400ms forwards'
                             });
                         } else {
                             $(this).css(rightPerspectiveOrigin);
                             $target.css({
                                 'animation': 'rightleave 400ms forwards',
                                 '-webkit-animation': 'rightleave 400ms forwards'
                             });
                         };
                         break;
                     case 2:
                         if (enter) {
                             $(this).css(bottomPerspectiveOrigin);
                             $target.css({
                                 'animation': 'bottomenter 400ms forwards',
                                 '-webkit-animation': 'bottomenter 400ms forwards'
                             });
                         } else {
                             $(this).css(bottomPerspectiveOrigin);
                             $target.css({
                                 'animation': 'bottomleave 400ms forwards',
                                 '-webkit-animation': 'bottomleave 400ms forwards'
                             });
                         };
                         break;
                     case 3:
                         if (enter) {
                             $(this).css(leftPerspectiveOrigin);
                             $target.css({
                                 'animation': 'leftenter 400ms forwards',
                                 '-webkit-animation': 'leftenter 400ms forwards'
                             });
                         } else {
                             $(this).css(leftPerspectiveOrigin);
                             $target.css({
                                 'animation': 'leftleave 400ms forwards',
                                 '-webkit-animation': 'leftleave 400ms forwards'
                             });
                         };
                         break;
                 }
             });
         })
         function getDirection($element, event) {
             var w = $element.width(),
                 h = $element.height(),
                 x = (event.pageX - $element.offset().left - (w / 2)) * (w > h ? (h / w) : 1),
                 y = (event.pageY - $element.offset().top - (h / 2)) * (h > w ? (w / h) : 1),
                 direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
             return direction;
         }
        </script>
	</body>
</html>